<template>
    <div class="code-layout" v-if="detailData">
        <div class="code-materials" v-if="detailData">
            <div>
                <!--          <plug-state :statusStr="status" v-if="status"/>-->
                <br />
            </div>
        </div>
        <div class="code-info">
            <h3 class="info-title">基本信息</h3>
            <ul class="info-item">
                <li>
                    <span class="key">名称:</span>
                    <span class="val">{{ detailData.model.name }}</span>
                </li>
                <li>
                    <span class="key"> 创建人： </span>
                    <span class="val">{{
                        detailData.create_user && (detailData.create_user &&
                            detailData.create_user.nick_name ||
                            detailData.create_user && detailData.create_user.username)
                    }}</span>
                </li>
                <li>
                    <span class="key">创建时间： </span>
                    <span class="val">{{ detailData.create_time }}</span>
                </li>
            </ul>
            <h3 class="info-title">环境信息 <i class="el-icon-edit-outline edit" @click="updateModelEva" /></h3>
            <ul class="info-item">
                <li>
                    <span class="key">类型:</span>
                    <span class="val">{{ detailData.type.name }}</span>
                </li>
                <li>
                    <span class="key">资源组:</span>
                    <span class="val">{{ detailData.node_group_list[0].product.name }}</span>
                </li>
                <li>
                    <span class="key">评估镜像:</span>
                    <span class="val">{{ detailData.node_group_list[0].image.name }}</span>
                </li>
                <li>
                    <span class="key">启动命令行:</span>
                    <span class="val">{{ detailData.node_group_list[0].command }}</span>
                </li>
            </ul>
        </div>
        <el-dialog :visible.sync="showModelEvaDialog" title="模型评估" width="840px">
            <el-form class="form myself-form" ref="evaModelForm" :model="evaModelForm" :rules="modelEvaSubmitRules"
                label-width="120px">
                <el-form-item label="模型名称" prop="version">
                    {{ detailData.model.name }}
                </el-form-item>
                <el-form-item label="模型版本" prop="version">
                    {{ detailData.model_version.version }}
                </el-form-item>
                <el-form-item label="类型" prop="version">
                    <el-select v-model="evaModelForm.type" value-key="id" @change="modelEvaTypeChange" style="width:100%;"
                        :popper-append-to-body="false" popper-class="select-popper" placeholder="请选择">
                        <el-option v-for="item in modelEvaTyleOptions" :key="item.id" :label="item.name" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资源组">
                    <el-select v-model="node_group_list.product_id" class="full-extent-select">
                        <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div v-if="showDiv">
                    <el-form-item label="评估镜像">
                        <el-select v-model="node_group_list.image_id" class="full-extent-select">
                            <el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="启动命令行" prop="command">
                        <el-input type="text" v-model="node_group_list.command" />
                    </el-form-item>
                </div>
                <el-form-item label="">
                    <el-button type="primary" @click="commitModelEva">确定</el-button>
                    <el-button class="none-type" @click="cancelModelEva">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

// import plugState from '@/components/module/plug-state'
import { getAllImages, } from '@/api/image'
import { putModelEvaluatio, getModelEvaluatioeDetail } from '@/api/modelEva'
import { getAllProducts } from '@/api/product'
import { getAllModelEvaluationTypes } from '@/api/modelEvaType'
export default {
    data() {
        return {
            status: null,
            evaModelForm: null,
            showUpdateDockfileDialog: false,
            dockerFile: '',
            imageOptions: [],
            showModelEvaDialog: false,
            node_group_list: [],
            productOptions: [],
            modelEvaTyleOptions: [],
            showDiv: false,
            modelEvaSubmitRules: {

            },
        };
    },

    props: ['detailData'],
    watch: {
        detailData(val) {
            this.status = val.status;
            this.formData = val
        },
    },
    async created() {
        this.evaModelForm = JSON.parse(JSON.stringify(this.detailData))
        this.getImageList()
        this.getProductList()
        this.getAllModelEvaTypes()
    },
    components: {
        // plugState,
    },

    async mounted() {
        this.$nextTick(() => {
            this.status = this.detailData.status;
        })
    },
    destroyed() {

    },
    methods: {
        async getAllModelEvaTypes() {
            let res = await getAllModelEvaluationTypes()
            let data = res.data
            data.push({ "name": "自定义", "id": "1" })
            this.modelEvaTyleOptions = data
            console.log(" this.modelEvaTyleOptions", this.modelEvaTyleOptions)
        },
        async getProductList() {
            let res = await getAllProducts()
            this.productOptions = res.data
        },
        async getImageList() {
            let res2 = await getAllImages({ visibility: 2, type: 3 })
            this.imageOptions = res2.data
        },
        modelEvaTypeChange() {
            if (this.evaModelForm.type.id == '1') {
                this.showDiv = true
            } else {
                this.showDiv = false
            }
        },
        async updateModelEva() {
            this.showModelEvaDialog = true
            this.node_group_list = this.detailData.node_group_list[0]
        },
        commitModelEva() {
            console.log("commit")
            this.$refs.evaModelForm.validate(async (valid) => {
                if (valid) {
                    console.log("")
                    if (this.evaModelForm.type.id != "1") {
                        this.evaModelForm.type_id = this.evaModelForm.type.id,
                            this.evaModelForm.node_group_list = [{
                                "image_id": this.evaModelForm.type.eva_image_id,
                                "command": this.evaModelForm.type.eva_image.command,
                                "product_id": this.node_group_list.product_id,
                                "type": 1,
                                "pod_num": 1
                            }]
                    } else {
                        this.evaModelForm.type_id = this.evaModelForm.type.id
                        this.evaModelForm.node_group_list = [this.node_group_list]
                    }
                    await putModelEvaluatio(this.evaModelForm)
                    this.showModelEvaDialog = false
                    this.freshData()
                }
            })
        },
        async freshData() {
            let res = await getModelEvaluatioeDetail({ id: this.detailData.id });
            if (res && res.data) {
                let data = res.data
                if (data.type_id == 1) {
                    data.type = { "name": "自定义", "id": "1" }
                }
                this.$emit('update:detailData', res.data);
            }
        },
        cancelModelEva() {
            this.showModelEvaDialog = false
        },
    }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";
</style>
